@mixin fz-m($fontSize: 14px) {
    font-size: $fontSize;
    font-family: PingFangSC-Medium, 'PingFang SC';
    font-weight: 500;
}

@mixin fz-r($fontSize: 14px) {
    font-size: $fontSize;
    font-family: PingFangSC-Regular, 'PingFang SC';
    font-weight: 400;
}

.config-card-form .cover_img {
    width: 100%;
}

.control-config-list {
    box-sizing: border-box;
    max-height: calc(100vh - 200px);
    height: calc(100vh - 200px);
    overflow-y: auto;
    overflow-x: hidden;
    width: 400px;
    padding: 24px;

    .control-config__attr {
        margin-top: 20px;
    }

    .control-config-name {
        margin-bottom: 16px;
    }

    h4 {
        @include fz-m;

        margin-bottom: 16px;

        > div.tip {
            white-space: nowrap;
            margin-top: 12px;
            color: #969696;

            @include fz-r(12px);
        }
    }

    .control-config__tags {
        .control-config-tags__item {
            margin-top: 16px;
        }

        .el-button {
            width: 100px;
            height: 36px;
            background: #f9f9f9;
            border-radius: 4px;
            border: 1px solid #eaeaea;
        }
    }

    .control-config-rule__item {
        @include fz-r(14px);

        .control-config-rule__title {
            display: flex;
            justify-content: space-between;

            img {
                cursor: pointer;
            }
        }

        .control-config-rule__card {
            margin: 18px 0;
            padding: 16px;
            box-sizing: border-box;
            border-radius: 2px;
            border: 1px solid #eaeaea;

            .el-select {
                width: 112px;
                margin: 8px;

                .el-input__inner {
                    height: 32px;
                    line-height: 32px;
                }
            }
        }
    }

    .add-rule-btn {
        width: 100%;
    }
}

.config-card-empty {
    color: #969696;

    @include fz-r;

    height: 80px;
    line-height: 80px;
    text-align: center;
    background-color: #eaeaea;

    &.control-config-list {
        padding: 0;
        height: calc(100vh - 200px);
        max-height: calc(100vh - 200px);
        line-height: 600px;
        font-size: 18px;
    }
}

.hidden {
    display: none !important;
}
